<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="shell">
        <ul class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ul>

        <ul class="min-imgs">
            <li class="min-img"></li>
            <li class="min-img"></li>
            <li class="min-img"></li>
        </ul>

        <div class="button">
            <button class="button-left"><</button>
            <button class="button-right">></button>
        </div>

    </div>


    <script>
        let images = document.querySelector('.images');
        let min = document.querySelectorAll('.min-img');
        let left = document.querySelector('.button-left');
        let right = document.querySelector('.button-right');


        let time;
        let index = 0;

        function position() {
            images.style.left = (index * -100) + '%';
            console.log((index * -100) + '%');
            console.log(min.length);
        }

        function add() {
            if (index >= min.length - 1) {
                index = 0;
            } else {
                index++;
            }
        }

        function desc() {
            if (index < 1) {
                index = min.length - 1;
            } else {
                index--;
            }
        }

        function timer() {
            time = setInterval(function() {
                index++;
                desc();
                add();
                position();
            }, 3000);
        }

        timer();

        left.addEventListener('click', () => {
            add();
            position();
            clearInterval(time);
            timer();

        });

        right.addEventListener('click', () => {
            desc();
            position();
            clearInterval(time);
            timer();
        });


        for (let i = 0; i < min.length; i++) {
            min[i].addEventListener('click', function() {
                index = i;
                position();
                clearInterval(time);
                timer();
            });
        }
    </script>


</body>

</html>